<!DOCTYPE html>
<script src="../../resources/js-test.js"></script>
<div>
    <div id="outerAuto" dir="auto">
        <div id="textInsertionPoint"></div>
        <div id="affectedByAuto"></div>
        <div id="explicitLTR" dir="ltr">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
</div>
<script>
    description("Style invalidation when inserting RTL text descendant of dir=auto");

    shouldBeEqualToString("getComputedStyle(outerAuto).direction", "ltr");
    shouldBeEqualToString("getComputedStyle(textInsertionPoint).direction", "ltr");
    shouldBeEqualToString("getComputedStyle(affectedByAuto).direction", "ltr");
    shouldBeEqualToString("getComputedStyle(explicitLTR).direction", "ltr");

    document.body.offsetTop; // force style and layout clean.

    textInsertionPoint.innerHTML = "&#x604;&#x644;";

    if (window.internals)
        shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "4");

    shouldBeEqualToString("getComputedStyle(outerAuto).direction", "rtl");
    shouldBeEqualToString("getComputedStyle(textInsertionPoint).direction", "rtl");
    shouldBeEqualToString("getComputedStyle(affectedByAuto).direction", "rtl");
    shouldBeEqualToString("getComputedStyle(explicitLTR).direction", "ltr");

    debug("\nForcing everything back to LTR with dir attribute:\n");

    document.body.offsetTop; // force style and layout clean.

    textInsertionPoint.dir = "ltr";

    if (window.internals)
        shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "4");

    shouldBeEqualToString("getComputedStyle(outerAuto).direction", "ltr");
    shouldBeEqualToString("getComputedStyle(textInsertionPoint).direction", "ltr");
    shouldBeEqualToString("getComputedStyle(affectedByAuto).direction", "ltr");
    shouldBeEqualToString("getComputedStyle(explicitLTR).direction", "ltr");
</script>
